<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="理学院">
    <meta name="description" content="理学院">
    <title>理学院</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- 页面 -->
  <section class="page">

    <!-- 页面头部 -->
    <header class="header"> 
        <section class="top">
            <!-- 页面的logo -->
            <section class="logo">
              <a href="#">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td>
                                <img src="images/理学院logo.png" border="0" alt="理学院（新）" title="理学院（新）">
                            </td>
                        </tr>
                    </tbody>
                </table>
              </a>
            </section>

            <!-- 顶部右侧区域 -->
            
                <!-- 勉励的八个字 -->
                <section class="biao yahei">
                    团结拼搏 自强不息
                </section>

                <!-- 站内搜索 -->
                <section class="search-box">
                  <form action="#" method="post" name="searchForm">
                    <span>站内搜索：</span>
                    <input type="text" class="search-input" name="INTEXT">
                    <button type="submit" class="search-btn"></button>
                  </form>  
                </section>
            
        </section>
        
        <!-- 导航栏 -->
        <nav class="nav yahei">
            <ul>
                <li><a href="#" title="首页">首页</a></li>
                <li><a href="#" title="学院概况">学院概况</a></li>
                <li><a href="#" title="学科专业">学科专业</a></li>
                <li><a href="#" title="师资队伍">师资队伍</a></li>
                <li><a href="#" title="教科研与社会服务">教科研与社会服务</a></li>
                <li><a href="#" title="党群工作">党群工作</a></li>
                <li><a href="#" title="学生工作">学生工作</a></li>       
            </ul>
        </nav>
    </header> 

    <!-- 页面内容 -->
    <section class="content-container">
        <section class="content bgline"> 
            <!-- 主内容 -->
            <main>
                <!-- 轮播图 -->
                <section class="carousel">
                    <img src="images/轮播图1.png" alt="轮播图1" class="active">
                    <img src="images/轮播图2.png" alt="轮播图2">
                    <img src="images/轮播图3.png" alt="轮播图3">
                    <img src="images/轮播图4.png" alt="轮播图4">
                    <img src="images/轮播图5.png" alt="轮播图5">
                    <section class="carousel-dots">
                        <span class="dot active">1</span>
                        <span class="dot">2</span>
                        <span class="dot">3</span>
                        <span class="dot">4</span>
                        <span class="dot">5</span>
                    </section>
                </section>
                
                <!-- 快速链接卡片 -->
                <section class="card-section yahei">
                    <ul>
                        <li><a class="b2" href="#">审核评估</a> </li>
                        <li><a class="b3" href="#">实验中心</a> </li>
                        <li><a class="b1" href="#">数学建模</a> </li>
                    </ul>
                </section>
            </main>
            
            <!-- 右侧新闻区域 -->
            <aside class="news-sidebar">
                <!-- 学院新闻 -->
                <section class="news-box">
                    <section class="news-title yahei">学院新闻
                        <span>
                            <a href="#" class="more-link">MORE>></a>
                        </span>
                    </section>
                    <article class="item">
                        <ul>
                            <li><a href="#">情系困难群众 扶贫慰问暖人心——理学院开展扶贫...</a></li>
                            <li><a href="#">九江学院理学院深入学习学校开展教育实习中期检查</a></li>
                            <li><a href="#">理学院组织学习党的二十届四中全会精神</a></li>
                            <li><a href="#">理学院"红烛引航"讲坛第三期举办：聚焦核心素...</a></li>
                            <li><a href="#">理学院开展"学贯四中全会，青春五新勇当先"...</a></li>
                        </ul>
                    </article>
                </section> 

                <!-- 学院通知 -->
                <section class="news-box">
                    <section class="news-title yahei">学院通知
                        <span>
                            <a href="#" class="more-link">MORE>></a>
                        </span>
                    </section>
                    <article class="item">
                        <ul>
                            <li><a href="#">朱全新教授学术报告</a></li>
                            <li><a href="#">关于评选理学院优秀共产党员、优秀党务工作者和...</a></li>
                            <li><a href="#">汪祥教授 学术报告</a></li>
                            <li><a href="#">李继春教授学术报告</a></li>
                            <li><a href="#">短期课程</a></li>
                        </ul>
                    </article>
                </section>
            </aside>
            
            <section class="clear-both"> </section>
        </section>
    </section>

    <!-- 页面底部 -->
    <footer class="footer">
    </footer>
    
</section>
  
  <script>
    // 轮播图功能实现
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.carousel img');
        const dots = document.querySelectorAll('.carousel-dots .dot');
        let currentSlide = 0;
        
        // 显示当前幻灯片
        function showSlide(index) {
            // 隐藏所有幻灯片
            slides.forEach(slide => {
                slide.classList.remove('active');
            });
            
            // 移除所有指示点的活动状态
            dots.forEach(dot => {
                dot.classList.remove('active');
            });
            
            // 显示当前幻灯片并激活当前指示点
            slides[index].classList.add('active');
            dots[index].classList.add('active');
            currentSlide = index;
        }
        
        // 为每个指示点添加点击事件
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                showSlide(index);
            });
        });
        
        // 自动轮播
        setInterval(() => {
            let nextSlide = (currentSlide + 1) % slides.length;
            showSlide(nextSlide);
        }, 3000);
    });
  </script>
</body>
</html>